<template>
  <q-layout view="hHh lpR fFf" class="bg-grey-3">
    <div class="row justify-center q-mx-md">
      <div class="q-pa-md shadow-2 bg-white col-xs-12 col-sm-10 col-md-6 col-lg-4" style="margin-top:5%">
        <div class="row items-end">
          <q-icon name="far fa-frown-open" color="red" size="60px"></q-icon>
          <span class="text-h3 q-ml-md">{{errorTitle}}</span>
        </div>
        <div class="text-body1 q-mt-md">{{errorMessage}}</div>
        <div class="text-body1 q-mt-md row justify-end items-center">
          <q-btn outline color="primary" icon="arrow_back" label="后退" @click="fx.router.go(-1)" />
          <q-btn outline color="primary" icon="home" label="转至首页" class="q-ml-sm" to="/" />
        </div>
      </div>
    </div>
  </q-layout>
</template>
<script lang="ts">
export default {
  name: 'frontendErrorPageStd'
}
</script>
<script lang="ts" setup>

import { computed } from 'vue'
const errorTitle = computed(() => {
  switch ($f.errorState.value) {
    case 1:
      return '参数错误'
    case 2:
      return '权限不足'
    case 3:
      return '502错误'
    default:
      return '出错了'
  }
})
const errorMessage = computed(() => {
  switch ($f.errorState.value) {
    case 1:
      return '此错误通常是由于要访问的资源不存在或页面参数错误引起'
    case 2:
      return '此错误通常是由于权限不足引起，如有需要，请联系管理员'
    case 3:
      return '可能系统正在更新，请稍后再试'
    default:
      return '未知错误，如有需要，请联系软件供应商'
  }
})

const fx = $f

</script>
